<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" style="
          display: flex;
          justify-content: space-between;
          width: 100%;
          font-size: 16px;
          align-items: center;
        ">
        <span>车辆详情</span>
        <el-button @click="pageReturn">返回</el-button>
      </div>
      <div class="top-card">
<!--        <el-image src="" style="width: 100px; height: 100px"></el-image>-->
        <div class="top-card-right">
          <div style="
              font-size: 16px;
              display: flex;
              justify-content: space-between;
            ">
            <div>
              <span style="font-weight: 600">车架号：</span><span>{{ detailForm.vinNo }}</span>
            </div>
            <div>
              <span style="font-weight: 600">车辆状态：</span><span>
                {{
                selectDictLabel(
                    dict.type.car_business_type,
                    detailForm.businessType
                )
              }}</span>
            </div>
          </div>
          <div>
            <span>品牌/车型/车款：</span>
            <span>{{
                `${detailForm.brandName ? detailForm.brandName : ""}${
                    detailForm.seriesName ? detailForm.seriesName + "/" : ""
                }${detailForm.modelName ? detailForm.modelName + "/" : ""}`
              }}</span>
          </div>
          <div>
            <span>车辆归属：</span><span>{{ detailForm.ascription }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="维修详情" name="wxxq">
        <el-form :model="detailForm" v-if="isForm" class="el-form">
          <el-card class="box-card">
            <div slot="header" class="header-card">
              <span class="header-card-title">车辆信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="车架号:">
                  <span>{{ detailForm.vinNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车牌号:">
                  <span>{{ detailForm.carNo }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="品牌/车型/车款:">
                  <span>{{
                      `${detailForm.brandName}/${detailForm.seriesName}/${detailForm.modelName}`
                    }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="车辆归属:">
                  <span>{{ detailForm.ascription }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆订单:">
                  <span>{{ detailForm.orderNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="租赁台数:">
                  <span>{{ detailForm.leaseNum }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="客户名称:">
                  <span>{{ detailForm.customerName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="租赁合同日期:">
                  <span>{{ detailForm.leaseStartTime + '~' + detailForm.leaseEndTime }}</span>
                </el-form-item>
              </el-col>
<!--              <el-col :span="8">-->
<!--                <el-form-item label="总预算费用:">-->
<!--                  <span>{{-->
<!--                      selectDictLabel(dict.type.car_type, detailForm.carType)-->
<!--                    }}</span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="车辆行驶里程:">
                  <span>{{ detailForm.travelMeligile }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="注册日期:">
                  <span>{{ detailForm.registerTime }}</span>
                </el-form-item>
              </el-col>

<!--              <el-col :span="8">-->
<!--                <el-form-item label="单车预算费用:">-->
<!--                  <span>{{ detailForm.brandName }}</span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
            </el-row>
            <el-row :gutter="20">
<!--              <el-col :span="8">-->
<!--                <el-form-item label="已维修成本:">-->
<!--                  <span>{{ detailForm.seriesName }}</span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->

<!--              <el-col :span="8">-->
<!--                <el-form-item label="单车剩余预估费用:">-->
<!--                  <span>{{ detailForm.styleYear }}</span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="header-card">
              <span class="header-card-title">维修信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="维修类别:">
                  <el-radio-group v-model="detailForm.maintenanceType" disabled>
                    <el-radio :label="v.value" v-for="v in dict.type.maintenance_type"
                              :key="v.value">{{ v.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="预计维修开始时间:" prop="expectStartTime">
                  <span>{{ detailForm.expectStartTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预计维修结束时间:" prop="expectEndTime">
                  <span>{{ detailForm.expectEndTime }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 维修类型 一般维修 -->
            <div v-if="detailForm.maintenanceType == '2'">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="签约保养厂/保养厂:" prop="maintenanceShop">
                    <span>{{ detailForm.maintenanceShop }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="故障现象:" prop="faultPhenomenon">
                    <span>{{ detailForm.faultPhenomenon }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="维修厂故障诊断:" prop="maintenanceFaultDiagnosis">
                    <span>{{ detailForm.maintenanceFaultDiagnosis }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="维修厂报价:" prop="maintenanceQuoter">
                    <span>{{ format_thousand(detailForm.maintenanceQuoter) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否符合索赔理由:" prop="reasonForClaim">
                    <span>{{
                        detailForm.reasonForClaim == "1"
                            ? "是"
                            : detailForm.reasonForClaim == "2"
                                ? "否"
                                : ""
                      }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否有同车型(处置车辆)对换配件:" prop="swappingAccessories">
                    <span>{{
                        detailForm.swappingAccessories == "1"
                            ? "是"
                            : detailForm.swappingAccessories == "2"
                                ? "否"
                                : ""
                      }}</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8" v-if="detailForm.reasonForClaim == '2'" prop="claimantReason">
                  <el-form-item label="不符合索赔理由:">
                    <span>{{ detailForm.claimantReason }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="综合建议方案:" prop="comprehensiveRecommendations">
                    <span>{{ detailForm.comprehensiveRecommendations }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="备注:" prop="generalMaintenanceRemark">
                    <span>{{ detailForm.generalMaintenanceRemark }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <!-- 保险类型 报废/出险 -->
            <div v-else>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="被保险人:">
                    <span>{{ detailForm.insuredName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾驶员:">
                    <span>{{ detailForm.driverName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="责任人单位名称:">
                    <span>{{ detailForm.responsibleUnitName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="责任类型:">
                    <span>{{
                        selectDictLabel(
                            dict.type.responsibility_type,
                            detailForm.responsibilityType
                        )
                      }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="责任方保险公司名称:">
                    <span>{{ detailForm.responsibleInsuranceUnitName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="事故日期:">
                    <span>{{ detailForm.accidentDate }}</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="事故类型:">
                    <span>{{
                        selectDictLabel(
                            dict.type.accident_type,
                            detailForm.accidentType
                        )
                      }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="出险地点:" prop="accidentLocation">
                    <span>{{ detailForm.accidentLocation }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否有人伤:" prop="humanInjury">
                    <span>{{
                        detailForm.humanInjury == "1"
                            ? "是"
                            : detailForm.humanInjury == "2"
                                ? "否"
                                : ""
                      }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="报案时间:" prop="reportingCaseTime">
                    <span>{{ detailForm.reportingCaseTime }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col style="margin-top: 16px">
                  <el-form-item label="定损单:" prop="lossAssessmentUrl">
                    <image-common v-model="detailForm.lossAssessmentUrl" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="header-card">
              <span class="header-card-title">维修项目明细</span>
            </div>
            <div >维修合计费用：</div>
            <el-row style="margin-bottom: 14px">
              <el-col>
                <el-table size="mini" :data="detailForm.carMaintenanceProjectList" border style="width: 100%">
                  <el-table-column align="center" label="序号" type="index"/>
                  <el-table-column align="center" label="维修项目名称" min-width="160" prop="maintenanceName">
                  </el-table-column>
                  <el-table-column align="center" label="金额/元" min-width="100" prop="price">
                    <template #default="{row}">
                      <span>{{format_thousand(row.price)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="单价材料费" min-width="120" prop="materialCost">
                    <template #default="{row}">
                      <span>{{format_thousand(row.materialCost)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="单价工时费" min-width="120" prop="laborCost">
                    <template #default="{row}">
                      <span>{{format_thousand(row.laborCost)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="配件号" min-width="140" prop="partNumber">
                  </el-table-column>
                  <el-table-column align="center" label="品牌" min-width="120" prop="maintBrand">
                  </el-table-column>
                  <el-table-column align="center" label="型号" min-width="120" prop="maintModel">
                  </el-table-column>
                  <el-table-column align="center" label="数量" min-width="120" prop="maintNum">
                  </el-table-column>
                  <el-table-column align="center" label="详细信息" min-width="150" prop="detailedInfo">
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="查看附件:">
                  <image-common v-model="detailForm.annexUrl"  :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="header-card">
              <span class="header-card-title">维修反馈</span>
            </div>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="实际维修开始时间:" prop="expectStartTime">
                  <span>{{ detailForm.expectStartTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际维修结束时间:" prop="expectEndTime">
                  <span>{{ detailForm.expectEndTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否个人垫付:">
                  <span>
                    {{
                      detailForm.advancePayment == "1" ? '是' : detailForm.advancePayment == "2" ? '否' : ''
                    }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="付款类型:">
                  <span>{{ detailForm.driverName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="维修完成照片:">
                  <image-common v-model="detailForm.maintenanceCompleteUrl"  :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结算单上传:">
                  <image-common v-model="detailForm.balanceUrl"  :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="维修意见反馈:">
                  <span>{{ detailForm.driverName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="维修记录" name="wxjl">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-form>
              <el-col :span="8">
                <el-form-item label="维修类型:">
                  <el-select v-model="status" clearable  placeholder="请选择" @change="handleChange">
                    <el-option label="报废" value="1"/>
                    <el-option label="一般维修" value="2"/>
                    <el-option label="出险" value="3"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="itemClass">
                <el-form-item label="车辆“维修”总次:">
                  <span>{{ form.totalCount }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="itemClass">
                <el-form-item label="车辆“维修”总金额:">
                  <span>{{ format_thousand(form.totalMoney) }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>

          <el-row :gutter="20">
            <el-col>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column label="操作"  align="center" width="100">
                  <template #default="{row}">
                    <el-button type="text" @click="handleRoute(row)">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="maintenanceType" label="维修类型" show-overflow-tooltip min-width="100">
                  <template #default="{row}">
                    <span v-if="row.maintenanceType == 1">报废</span>
                    <span v-if="row.maintenanceType == 2">一般维修</span>
                    <span v-if="row.maintenanceType == 3">出险</span>
                  </template>
                </el-table-column>
                <el-table-column prop="customerName" align="center" label="客户名称">
                </el-table-column>
                <el-table-column prop="expectStartTime" align="center" label="预计开始时间">
                </el-table-column>
                <el-table-column prop="expectEndTime" align="center" label="预计结束时间">
                </el-table-column>
                <el-table-column prop="actualStartTime" align="center" label="实际际开始时间">
                </el-table-column>
                <el-table-column prop="actualEndTime" align="center" label="实际结束时间">
                </el-table-column>
                <!--              <el-table-column prop="name" label="归属部门">-->
                <!--              </el-table-column>-->
                <!--              <el-table-column prop="address" label="所在城市">-->
                <!--              </el-table-column>-->
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import imgList from "../imgList.vue";
import {
  getInsuranceDetails,
  getDetails,
  queryPageRecord,
} from "@/api/zcwh/maintenanceApi.js";
import {getRepairMessage} from "@/api/zcwh/vehicleTabs.js";
export default {
  name: "maintenanceDetails",
  dicts: [
    "maintenance_type",
    "car_business_type",

    "car_type",
    "responsibility_type",
    "accident_type",
  ],
  components: {imgList},
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        maintenanceType: "",
      },

      total: 0,
      dataList: [],
      isForm: false,
      routeQuery: {},
      activeName: "wxxq",
      detailForm: {},
      status:'',
      tableData: [],
      form:{}
    };
  },
  watch: {},
  computed: {},
  created() {
    if(this.$route.query.id){
      this.getDetails(this.$route.query.id);
    }
  },
  methods: {
    handleRoute(row){
      this.activeName = "wxxq"
      this.getDetails(row.maintenanceId);
    },

    maintenanceChange(val) {
      if (val) {
        this.queryParams.maintenanceType = val;
        this.queryPageRecord();
      } else {
        this.queryParams.maintenanceType = "";
      }
    },
    queryPageRecord() {
      queryPageRecord({carId: "1"}).then((res) => {
      });
    },
    pageReturn() {
      this.$tab.closePage().then(({visitedViews}) => {
        this.$router.push({
          path: "/clgl/maintenanceList",
        })
      })
    },
    handleClick(tab, event) {
      if (this.activeName == "wxjl") {
        this.handleList();
      }
    },
    getDetails(id) {
      getDetails(id).then((res) => {
        if (res.code == "200") {
          this.detailForm = res.data || {};

          this.isForm = true;
        }
      });
    },

    handleList() {
      this.loading = true;
      let obj = {
        carId: this.detailForm.carId + '',
        status: this.status,
      }
      getRepairMessage(obj)
          .then((res) => {
            this.form = res
            this.tableData = res.vo;
          })
          .finally(() => {
            this.loading = false;
          });
    },

    handleChange(val) {
      this.status = val
      this.handleList()
    },
  },
};
</script>


<style lang="scss" scoped>
.box-card {
  font-size: 14px;
  margin-bottom: 20px;

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 140px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    img {
      display: block;
      width: 200px;
      height: 160px;
    }

    .top-card-right {
      flex: 1;
      margin-left: 20px;
      font-size: 14px;
      line-height: 36px;
    }
  }

  ::v-deep .el-card__header {
    padding: 0;
    height: 48px;
    margin: 0 14px;
    display: flex;
    align-items: center;

    .header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .header-card-title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 10px 14px;
  }
}

.el-form {
  ::v-deep.el-form-item {
    display: flex;
  }

  ::v-deep .el-form-item {
    margin-bottom: 12px;
  }

  ::v-deep.el-form-item__content {
    line-height: normal;
    flex: 1;
    margin-left: 0 !important;
  }

  ::v-deep.el-form-item__label {
    line-height: normal;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #646464;
  }
}
</style>
